import {useNavigate} from 'react-router-dom'
import {useState} from 'react'
import { Card,Input,Button } from 'tdesign-react';
import { CloseIcon } from 'tdesign-icons-react';
import axios from 'axios';
import './List.css'
function List() {
    let navigate = useNavigate()
    let [value,setvalue]=useState('')  
    let [indexs, setindexs] = useState(0);
    let [colors, setcolors] = useState(['#000','#ff0000','#00ff00','#6600ff','#ff00ff','#00ffff','#0000ff'])
    let add=async()=>{
        let {data}=await axios.post('http://localhost:3000/addcate',{name:value})
        console.log(data);
        if(data.code==200){
            setvalue('')
            navigate('/')
        }
        
    }
  return (
    <div>
       <Card
      title="创建项目"
      actions={
        
        <CloseIcon onClick={()=>navigate('/')} />

        
      }
      bordered
      headerBordered
      style={{
        width: '500px',
        height:'650px',
        margin:'0 auto',
        marginTop:'50px'

      }}
    >
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div>
            <div style={{width:'20px',height:'20px',borderRadius:'50%',backgroundColor:colors[indexs]}}></div>
        </div>
        <Input
            placeholder="请输入内容"
            value={value}
            clearable
            onChange={(value) => {
                setvalue(value);
            }}
            onClear={() => {
                setvalue('');
            }}
        />
      </div>
        <div style={{display:'flex',flexWrap:'wrap',marginTop:'20px',justifyContent:'space-around',marginBottom:'20px'}}>
            {
                colors.map((item,index)=>{
                    return <div key={index} className='list' style={{width:'20px',height:'20px',borderRadius:'50%',backgroundColor:item}} onClick={()=>{
                        setindexs(index)
                    }}>
                        
                    </div>
                })
            }
        </div>
        <Button theme="primary" onClick={add}>添加</Button>
        <Button theme="primary" variant="outline" onClick={()=>navigate('/')}>
          取消
        </Button>
    </Card>
    </div>
  );
}

export default List;